<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>视频轮播</title>
		<link rel="stylesheet" href="css/reset.css" />
		<style>
		    body,html{
		    	width: 100%;
		    	font-family: "微软雅黑";
		    }
		    
		    .v_content{
		    	width: 620px;
		    	height: 200px;
		    	border: 1px solid #CDCDCD;
		    	position: relative;
		    	overflow: hidden;
		    	margin: auto;
		    }
		    .v_content_list{
/*		    	position: absolute;
*/		    	width:2500px;
		    	height: 100%;
		    	margin: auto;
		    }
		    ul{
		    	margin: 8px;
		    }
			ul li{
				display: inline-block;
				margin: 8.2px;
			}
			a{
				text-decoration: none;
			}
			.v_content_title,.v_content_turn{
				display: inline-block;
				line-height: 45px;
			}
			.v_content_turn{
				margin-left: 14px;
				cursor: pointer;
			}
			.v_content_turn>span:hover{
				color: #008000;
			}
			.v_content_header{
				background: #F2F2F2;
			}
			.current{
				background-position:0 -220px;
			}
		</style>
	</head>
	<body>
		<div class="v_content">
			<div class="v_content_list">
				<div class="v_content_header">
					<div class="v_content_title">
					  <span><h4>视频轮播</h4></span>
					</div>
					<div class="v_content_turn">
						<span id="left">向左</span>
						<span id="right">向右</span>
					</div>
				</div>
				
				<div class="v_showList">
					<ul>
						<li><a href="#"><img src="img/1.jpg" width="130" height="80"/></a></li>
						<li><a href="#"><img src="img/1.jpg" width="130" height="80"/></a></li>
						<li><a href="#"><img src="img/1.jpg" width="130" height="80"/></a></li>
						<li><a href="#"><img src="img/1.jpg" width="130" height="80"/></a></li>
						<li><a href="#"><img src="img/16.jpg" width="130" height="80"/></a></li>
						<li><a href="#"><img src="img/16.jpg" width="130" height="80"/></a></li>
						<li><a href="#"><img src="img/16.jpg" width="130" height="80"/></a></li>
						<li><a href="#"><img src="img/16.jpg" width="130" height="80"/></a></li>
						<li><a href="#"><img src="img/49281286_p0_master1200.jpg" width="130" height="80"/></a></li>
						<li><a href="#"><img src="img/49281286_p0_master1200.jpg" width="130" height="80"/></a></li>
						<li><a href="#"><img src="img/49281286_p0_master1200.jpg" width="130" height="80"/></a></li>
						<li><a href="#"><img src="img/49281286_p0_master1200.jpg" width="130" height="80"/></a></li>
					</ul>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
		<script type="text/javascript">
		    var page =1;
		    var i =4;
			$("#right").click(function(){
				var len = $("li").length;
				var pageCount = Math.ceil(len/i);
				var v_width = $(".v_showList").width();
				
				if(!$(".v_showList").is(':animated')){
					if(page == pageCount){
						$(".v_showList").animate({left:"0px"},"show");
						page = 1;
					}else{
						$(".v_showList").animate({left:"-="+v_width},"show");
						page++;
					}
				}
				
			});
			$("#left").click(function(){
				$(".v_showList").animate({left:'-10%'});
			})
			
		</script>
	</body>
</html>
